/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Fragment} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  Button,
  TouchableOpacity,
  View,
  Text,
  StatusBar,
} from 'react-native';
import { onThemeChange } from '../action/theme';
import { connect } from 'react-redux'
import action from '../action';
import NavigationUtil from '../navigator/NavigationUtil'
import NavigationBar from '../common/NavigationBar'
// import { TouchableOpacity } from 'react-native-gesture-handler';
import Feather from 'react-native-vector-icons/Feather'
import Ionicons from 'react-native-vector-icons/Ionicons'
const THEME_COLOR = '#678'
class MyPage extends React.Component{
  getRightButton(){
    return <View>
        <TouchableOpacity onPress={()=>{

        }}>
            <View style={{padding:5,marginRight:8}}>
               <Feather
                  name={'search'}
                  size={24}
                  style={{color:"white"}}
               />
            </View>
        </TouchableOpacity>
    </View>
  }
  getLeftButton(callBack){
    return <TouchableOpacity 
              style={{padding:8,marginLeft:8}}
              onPress={callBack}>
                <Ionicons
                  name="ios-arrow-back"
                  size={26}
                  style={{color:"white"}}
                />
    </TouchableOpacity>
  }
  render(){
    let statusBar = {
      backgroundColor:THEME_COLOR,
    }
    let navigationBar = 
    <NavigationBar
      title={'我的'}
      statusBar={statusBar}
      style={{backgroundColor:THEME_COLOR}}
      rightButton={this.getRightButton()}
      leftButton={this.getLeftButton()}
    />
    const {navigation} = this.props
    return (
    
      <View style={styles.sectionContainer}>
          {navigationBar}
        <Text style={styles.sectionTitle}>MyPage</Text>
        <Button
          title = "改变主题色"
          onPress = {()=>{
            // navigation.setParams({
            //   theme:{
            //     tintColor:'green',
            //     updateTime:new Date().getTime()
            //   }
            // })
            this.props.onThemeChange('#206')
          }}
        />

        <Text
          onPress={() => {
              NavigationUtil.goPage({}, 'DetailPage')
            }
          }
        >跳转到详情页面</Text>

        <Button
          title={'跳转到Fetch Demo'}
          onPress={() => {
            NavigationUtil.goPage({}, 'FetchDemoPage')
          }
          }
        />

        <Button
          title={'AsyncStorageDemoPage'}
          onPress={() => {
            NavigationUtil.goPage({}, 'AsyncStorageDemoPage')
          }
          }
        />

        <Button
          title={'离线缓存框架'}
          onPress={() => {
            NavigationUtil.goPage({}, 'DataStoreDemoPage')
          }
          }
        /> 
      </View>
    )
  }
 
};

const styles = StyleSheet.create({

  sectionContainer: {
   
    flex:1
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color:'#333',
  },
 
});


const mapStateToProps = state =>({})
const mapDispatchToProps = dispatch =>({
  onThemeChange:theme=>dispatch(action.onThemeChange(theme))
})

export default connect(mapStateToProps,mapDispatchToProps)(MyPage)